<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="../static/lib/bootstrap/css/bootstrap.css"
          th:href="@{/lib/bootstrap/css/bootstrap.css}">
    <title>申请入驻</title>
    <style>
        /* 限制使用响应式布局 */
        body {
            font-family: "Microsoft YaHei UI", serif;
            min-width: 1376px;
        }

        /* 加粗墨蓝色字体 */
        .text-inkblue {
            color: rgb(19, 45, 102);
            font-weight: 800;
        }

        .container-fluid {
            min-width: 1376px !important;
        }

        .container {
            min-width: 1100px !important;
        }

        #logo-bar {
            text-align: center;
            border-bottom: 5px solid rgb(19, 45, 102);
        }

        .star {
            font-size: 16px;
            color: red;
        }

        #main-container {
            background-color: rgb(232, 232, 232);
        }

        #main-container .container {
            background-color: rgb(245, 245, 245);
            padding-top: 20px;
        }

        /* 以下三种输入框的样式均只是对bootstrap的补充,需要结合bootstrap使用 */
        /* 开头几个输入框的样式 */
        input.basic-info {
            width: 30%;
            display: inline-block;
        }

        /* 下拉框样式 */
        select.basic-info {
            width: 30%;
            display: inline-block;
        }

        /* 长介绍输入框样式 */
        textarea.introduction-info {
            width: 50%;
            display: inline-block;
        }

        /* 头部标题 */
        .members-panel {
            background-color: #132D66;
            height: 60px;
            margin-bottom: 0;
        }

        .members-panel .title {
            color: rgb(255, 251, 240);
            font-size: 20px;
            margin-top: 6px;
            margin-left: 60px;
            line-height: 60px;
        }

        .members-table {
            background-color: rgb(235, 235, 235);
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

        /* 模拟表格一栏 */
        .members-grid {
            float: left;
            margin: 2px 1%;
        }

        /* 该区域的一行,类似bootstrap的.row */
        .members-line {
            display: block;
            clear: both;
        }

        /* 表格每一列的宽度,bootstrap提供的网格宽度不能满足要求,因此自定义了一个*/
        .members-line .members-grid:nth-child(1) {
            width: 10%;
        }

        .members-line .members-grid:nth-child(2) {
            width: 10%;
        }

        .members-line .members-grid:nth-child(3) {
            width: 13%;
        }

        .members-line .members-grid:nth-child(4) {
            width: 12%;
        }

        .members-line .members-grid:nth-child(5) {
            width: 12%;
        }

        .members-line .members-grid:nth-child(6) {
            width: 22%;
        }

        .members-line .members-grid:nth-child(7) {
            width: 6%;
        }

        /* 移除成员按钮按钮 */
        .members-line .members-grid:nth-child(7) .remove-member {
            display: inline-block;
            padding-top: 6px;
            color: dodgerblue;
            cursor: pointer;
        }

        /* 表头样式 */
        .members-grid-header {
            text-align: center;
            font-weight: 600;
        }

        .members-grid .hint {
            font-size: 12px;
        }

        /* 不符合要求的字段警告样式 */
        span.text-feedback {
            color: lightcoral;
        }

        /* 上传文件的添加移除按钮 */
        label.upload-add-btn {
            cursor: pointer;
        }

        label.upload-remove-btn {
            cursor: pointer;
        }

        /* 上传中 */
        label.upload-loading {
            cursor: progress;
        }

        .file-item {
            background-color: #e9e9e9;
            padding: 0 1px;
            margin: 1px 0;
            height: 24px;
        }

        .file-item .progress {
            margin: 0 auto;
        }

    </style>
</head>
<body ng-app="register">

<!-- 导航 -->
<nav id="header" class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html" th:href="@{/}">首页</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="register.html" th:href="@{/register}">申请入驻</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="admin-login.html" th:href="@{/admin-backend/login}">管理员登陆</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- logo -->
<div id="logo-bar">
    <img src="../static/img/logo.png" th:src="@{img/logo.png}" width="500px" height="100px">
</div>

<div id="main-container" class="container-fluid" ng-controller="form-controller">
    <div class="container">
        <form class="form-horizontal" name="team">
            <input-with-validate-and-null-check label='团队名称'
                                                model='teamData.teamName'></input-with-validate-and-null-check>
            <select-with-null-check label="所属领域" model="teamData.belongField"
                                    options="belongFields"></select-with-null-check>
            <input-with-null-check label="项目名称" model="teamData.projectName"></input-with-null-check>
            <select-with-null-check label="项目类型" model="teamData.projectType"
                                    options="projectTypes"></select-with-null-check>
            <div class="form-group members-panel">
                <span class="title">团队核心成员(第一名为项目负责人) <span
                        class="glyphicon glyphicon-menu-down"></span>
                </span>
            </div>
            <div class="form-group members-table">
                <div>
                    <div class="members-line">
                        <div class="members-grid-header members-grid"><span class="star">*</span>姓名</div>
                        <div class=" members-grid-header members-grid"><span class="star">*</span>学院</div>
                        <div class=" members-grid-header members-grid"><span class="star">*</span>学号</div>
                        <div class=" members-grid-header members-grid"><span class="star">*</span>学历</div>
                        <div class=" members-grid-header members-grid"><span class="star">*</span>联系电话</div>
                        <div class=" members-grid-header members-grid"><span class="star">*</span>Email</div>
                    </div>
                    <div ng-repeat="item in teamData.members track by $index">
                        <member model="item" remove="removeMember($index)"></member>
                    </div>
                    <div class="members-line text-center" style="margin-top:20px">
                        <button type="button" class="btn btn-default add-member" ng-click="addMember()">添加成员</button>
                    </div>
                </div>
            </div>
            <textarea-with-null-check label="项目简介" model="teamData.projectBrief"></textarea-with-null-check>
            <textarea-with-null-check label="主营业务" model="teamData.projectDirector"></textarea-with-null-check>
            <textarea-with-null-check label="前期基础" model="teamData.workFoundation"></textarea-with-null-check>
            <textarea-with-null-check label="项目规划" model="teamData.plan"></textarea-with-null-check>
            <div class="form-group">
                <div class="row">
                    <label class="col-xs-2 control-label text-inkblue"><span class="star">*</span>请上传相关文件</label>
                    <div class="col-xs-10">
                        <!-- 文件上传 -->
                        <div class="row">
                            <ul class="list-unstyled">
                                <li><label class="upload-add-btn" for="file-upload"><img src="../static/img/add.png"
                                                                                         th:src="@{img/add.png}" width="24px"
                                                                                         height="24px"></label>
                                    <!-- 注意这里添加了文件上传的参数 -->
                                    <input id="file-upload" class="hidden" type="file" file-select file-uploader="fileUploader" params="paramsWithFileUpload" multiple/>
                                    <span class="text-inkblue">请上传申请书、策划书及其它对项目情况审核有帮助的材料</span></li>
                                <li><span class="text-inkblue">支持doc,docx,pdf,mp3,mp4,rar,zip等格式</span></li>
                                <li><span class="text-inkblue">文件不能超过5个</span></li>
                                <li><span class="text-inkblue">每个文件不能超过50MB</span></li>
                            </ul>
                        </div>
                        <!-- 文件列表 -->
                        <div class="row" ng-repeat="item in fileUploader.files">
                            <div class="col-xs-10 file-item">
                                <div class="col-xs-7">
                                    <!-- 注意这里移除的时候添加了文件上传的参数 -->
                                    <label class="upload-remove-btn" ng-show="item.isDone" ng-click="fileUploader.remove(item,paramsWithFileUpload)"><img src="../static/img/del.png"
                                                                          th:src="@{img/del.png}" width="24px"
                                                                          height="24px"/></label>
                                    <label class="upload-loading" ng-show="!item.isDone"><img src="../static/img/loading-sm.gif"
                                                                          th:src="@{img/loading-sm.gif}" width="24px"
                                                                          height="24px"/></label>
                                    <span class="text-inkblue">{{item.name}}</span>
                                </div>
                                <div class="col-xs-5">
                                    <div class="progress">
                                        <div class="progress-bar" ng-class="{'progress-bar-danger':item.isFailure,
                                        'progress-bar-success':item.isSuccess}" ng-style="{width:item.progress + '%'}"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div class="row">-->
                <!--<div class="col-xs-8 col-xs-offset-2">-->

                <!--</div>-->
                <!--</div>-->
            </div>
            <div class="form-group text-center">
                <button type="button" class="btn btn-default btn-lg" ng-click="submit()">
                    提交
                </button>
            </div>
        </form>
    </div>
</div>


<script th:inline="javascript">
    // 设置提交成功时重定向的url
    var successRedirectUrl = 'index.html';

    // thymeleaf语法,服务端运行时会添加的代码
    /*[+
     successRedirectUrl = '/';
     +]*/
</script>
<script src="../static/js/config.js" th:src="@{js/config.js}"></script>
<script src="../static/lib/angular/angular.js" th:src="@{/lib/angular/angular.min.js}"></script>
<script src="../static/lib/ng-rap/ng-rap.min.js" th:src="@{/lib/ng-rap/ng-rap.min.js}"></script>
<script src="../static/lib/angular/angular-cookies.js" th:src="@{lib/angular/angular-cookies.min.js}"></script>
<script src="../static/js/makerspace.component.js" th:src="@{js/makerspace.component.js}"></script>
<script src="../static/js/makerspace.util.js" th:src="@{js/makerspace.util.js}"></script>
<script src="../static/js/register.js" th:src="@{js/register.js}" ></script>
<script type="text/javascript" th:inline="javascript">
    // 配置rap参数
    app.config(['$httpProvider','ngRapProvider',function ($httpProvider, ngRapProvider) {
        ngRapProvider.script = "http://rapapi.org/rap.plugin.js?projectId=22290";
        ngRapProvider.enable({
            /*[-*/
            mode: 3
            /*-]*/
            /*[+
             mode: 0
             +]*/
        });
        $httpProvider.interceptors.push("rapMockInterceptor");
    }]);
</script>
</body>
</html>